import React from 'react'
// 4. 导入路由器和路由组件
import { NavLink, Link, useRoutes } from 'react-router-dom'
// 导入css样式
import './App.css'
// 导入路由表
import routes from './routes'
console.log('routes: ', routes);
export default function App() {
    return (
        <div>
            <h3>App</h3>
            {/* <ul>
                <li><a href="/enter">首页</a></li>
                <li><a href="/login">登录</a></li>
                <li><a href="/users">用户列表</a></li>
            </ul> */}
            <h3>NavLink</h3>
            <ul>
                {/* isActive是一个布尔值，如果是激活状态就是true，否则是false */}
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/enter'>首页</NavLink></li>
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/login'>登录页</NavLink></li>
                <li><NavLink className={({ isActive }) => {
                    return isActive ? 'self-active' : ''
                }} to='/users'>用户页</NavLink></li>
            </ul>
            <h3>Link</h3>
            <ul>
                <li><Link to='/enter'>首页</Link></li>
                <li><Link to='/login'>登录页</Link></li>
                <li><Link to='/users'>用户页</Link></li>
            </ul>
            {/* 5. 配置路由 path 路径 - element 路由组件 */}
            {useRoutes(routes)}
        </div>
    )
}
